<template>
  <div class="typhoon">
    <div class="typhoon-map" ref="map"></div>
  </div>
</template>

<script>
  import Map from 'ol/map'
  import View from 'ol/view'
  import Interaction from 'ol/interaction'

  export default {
    props: {
      activeLayer: {
        type: String,
        default: 'base'
        /*
          base：基础白色底图
          height：地形图底图
          panorama：卫星图底图
        */
      }
    },
    created () {
      this.layers = {}
      // this.httpUrl = 'http://202.105.25.138:20462'
      // this.baseLayerUrl = `${this.httpUrl}/`
      // this.heightLayerUrl = `${this.httpUrl}/static/map_tile/gaocheng_guangdong_google/tiles/{z}/{y}/{x}.png`
    },
    mounted () {

    },
    methods: {
      initMap () {
        const layers = []

        const typhoonMap = new Map({
          target: this.$refs['map'],
          layers: layers,
          view: new View({
            center: [113.0445, 23.0907],
            zoom: 10,
            maxZoom: 19,
            minZoom: 5,
            projection: 'EPSG:4326'
          }),
          // 解决在移动端上地图可旋转的情况
          interactions: Interaction.defaults({ pinchRotate: false })
        })

        this.layers['Map'] = typhoonMap
      }
    }
  }
</script>

<style lang="scss" scoped>
  .typhoon {
    width: 100%;
    height: 100%;
    .typhoon-map {
      width: 100%;
      height: 100%
    }
  }
</style>

